<!--页脚组件-->
<template>
  <v-footer
      color="#786554"
      class="text-center d-flex flex-column py-8"
  >
    <v-row>
      <v-col>
        <v-sheet color="transparent" class="text-start w-[121px] md:w-[152px]">
          <h1>Products</h1>
          <div class="text-sm font-thin leading-7">
            <h1>Sofas</h1>
            <h1>Sectionals</h1>
            <h1>Loveseats</h1>
            <h1>Sleeper Sofas</h1>
            <h1>Armchairs</h1>
            <h1>Ottomans</h1>
            <h1>Best Sellers</h1>
          </div>
        </v-sheet>
      </v-col>
      <v-col>
        <v-sheet color="transparent" class="text-start w-[121px] md:w-[152px]">
          <h1>Support</h1>
          <div class="text-sm font-thin leading-7">
            <h1>Order Free Swatches</h1>
            <h1>Assembly</h1>
            <h1>FAQs</h1>
            <h1>Financing</h1>
            <h1>Warranty</h1>
            <h1>Shipping & Delivery</h1>
            <h1>Returns</h1>
            <h1>Contact Us</h1>
            <h1>Do Not Sell My</h1>
            <h1>Personal Information</h1>
          </div>
        </v-sheet>
      </v-col>
      <!--   居中-->
      <v-col cols="12" md="4" class="px-8">
        <v-sheet color="transparent" class="text-center">
          <h1 class="text-h5 pt-4 pb-8 text-xxl-h4">A cozy home begins here.™</h1>
          <h1 class="pb-2  text-body-1 text-xxl-h5">Join the Club!</h1>
          <h1 class="text-xs font-thin">Sign up to enjoy discounts, exclusive sales and the latest news!</h1>
          <!--  搜索栏-->
          <div class="d-flex flex-row pt-4 px-4 ">
            <v-text-field
                bg-color="#fff"
                rounded="0"
                color="#EEE9E3"
                hide-details="auto"
                label="Email Address"
            ></v-text-field>
            <div class="d-flex align-center px-6 bg-[#EEE9E3] cursor-pointer">
              <p class="text-center text-sm text-[#786554]">Sign Me Up</p>
            </div>
          </div>
        </v-sheet>
      </v-col>

      <v-col>
        <v-sheet color="transparent" class="text-start w-[121px] md:w-[152px]">
          <h1>About</h1>
          <div class="text-sm font-thin leading-7">
            <h1>Our Story</h1>
            <h1>Jobs</h1>
            <h1>B2B / Wholesale</h1>
          </div>
        </v-sheet>
      </v-col>
      <v-col>
        <v-sheet color="transparent" class="text-start w-[121px] md:w-[152px]">
          <h1>Need Help?</h1>
          <div class="text-sm font-thin leading-7">
            <h1>Contact Us</h1>
            <h1>Need a Hand?</h1>
            <h1>Spread the love!</h1>
            <h1>Refer & Earn</h1>
          </div>
          <div>
          </div>
        </v-sheet>
      </v-col>
    </v-row>
    <v-row>
      <v-sheet color="transparent" class="pt-4">
        <div class="d-flex flex-row text-xs font-weight-light divide-x-2">
          <p class="px-2">
            © 2024 ALBANY PARK. ALL RIGHTS RESERVED.
          </p>
          <p class="px-2 cursor-pointer">
            PRIVACY NOTICE
          </p>
          <v-divider vertical></v-divider>
          <p class="px-2 cursor-pointer">
            TERMS OF USE
          </p>
          <v-divider vertical></v-divider>
          <p class="px-2 cursor-pointer">
            ACCESSIBILITY
          </p>
        </div>
      </v-sheet>
    </v-row>
  </v-footer>
</template>

<script setup lang="ts">
import {ref} from "vue";

const icons = ref([
  'mdi-facebook',
  'mdi-twitter',
  'mdi-linkedin',
  'mdi-instagram',
])
const items = [
  {
    title: 'Vuetify Documentation',
    icon: `$vuetify`,
    href: 'https://vuetifyjs.com/',
  },
  {
    title: 'Vuetify Support',
    icon: 'mdi-shield-star-outline',
    href: 'https://support.vuetifyjs.com/',
  },
  {
    title: 'Vuetify X',
    icon: `svg:M2.04875 3.00002L9.77052 13.3248L1.99998 21.7192H3.74882L10.5519 14.3697L16.0486 21.7192H22L13.8437 10.8137L21.0765 3.00002H19.3277L13.0624 9.76874L8.0001 3.00002H2.04875ZM4.62054 4.28821H7.35461L19.4278 20.4308H16.6937L4.62054 4.28821Z`,
    href: 'https://x.com/vuetifyjs',
  },
  {
    title: 'Vuetify GitHub',
    icon: `mdi-github`,
    href: 'https://github.com/vuetifyjs/vuetify',
  },
  {
    title: 'Vuetify Discord',
    icon: `mdi-discord`,
    href: 'https://community.vuetifyjs.com/',
  },
  {
    title: 'Vuetify Reddit',
    icon: `mdi-reddit`,
    href: 'https://reddit.com/r/vuetifyjs',
  },
]
</script>

<style scoped>

</style>
